<template>
  <div class="main-page">
    <TopNews class="top-content" />
    <el-divider>cuit</el-divider>
    <div class="bottom-content">
      <div class="row">
        <RecruitAndCulture />
      </div>
      <!-- <el-divider>cuit</el-divider> -->
      <div class="row">
        <SchoolAndDiscipline />
      </div>
      <!-- <el-divider>cuit</el-divider> -->
      <div class="row">
        <MajorAndDownload />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main-page {
  //   border: red 1px solid;
  .top-content {
    height: 25vh;
  }
  .bottom-content {
    // height: 100vh;

    .row {
      margin: 0 0 4vh 0;
      // border: solid 1px red;
    }
  }
}
</style>

<script>
import {
  TopNews,
  RecruitAndCulture,
  SchoolAndDiscipline,
  MajorAndDownload
} from "@/view/MainPage/components";
export default {
  name: "MainPage",
  components: {
    TopNews,
    RecruitAndCulture,
    SchoolAndDiscipline,
    MajorAndDownload
  }
};
</script>
